<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title data-th-text="${article.title}">文章标题</title>
<link data-th-include="commons::res">
<link data-th-include="commons::ueditor">
<style type="text/css">
.title>.title {
	font-size: 48px;
	font-weight: bold;
}

.title>.info>.time {
	float: right;
	font-size: 16px;
}

.title>.info>.author {
	float: left;
	font-size: 16px;
}

.comment .info {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #ccc;
}

.comment .head {
	width: 46px;
	height: 46px;
	border-radius: 23px;
}

.comment .nickName {
	font-size: 18px;
	font-weight: bold;
	margin: 0 5px;
}

.comment .time {
	font-size: 16px;
	margin: 0 5px;
	color: #ccc;
}

.comment .content {
	padding: 10px;
	font-size: 16px;
	color: #666;
}

.comment .content>.comment {
	margin-left: 30px;
}

.article .look {
	font-size: 36px;
	color: #ccc;
	display: none;
}

.article .content.hiddenContent {
	max-height: 200px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.article .look:hover {
	cursor: pointer;
}

.article .look.active {
	display: block;
}
</style>
<script type="text/html" id="commentTpl" data-th-inline="html">
{{#  layui.each(d.comments, function(index, item){ }}
	<div class="layui-row comment">
		<div class="layui-row ">
			<div class="layui-col-md12 layui-col-lg12 info">
				<img class="head" data-th-src="@{/upload/heads/{{item.createdUser.headId}}}" /> 
				<span class="nickName">{{item.createdUser.nickName}}</span> 
				<span class="time">{{item.createdTime}}</span>
				<a class="layui-btn layui-btn-normal" onclick="comment({{item.articleId}},{{item.id}})">回复评论</a>
			</div>
		</div>
		<div class="layui-row content">
			<div class="layui-col-md12 layui-col-lg12">
				{{item.content}}
			</div>
			<div class="comment" comment-id="{{item.id}}">
			{{# 
				if(item.comments&&item.comments.length>0){ 
					setTimeout(function(){
						tpl('#commentTpl','.comment[comment-id='+item.id+']',{
							comments:item.comments,
							tpl:tpl
						},100)
					})
				}
			}}
			</div>
		</div>
	</div>
{{#  }); }}
</script>
<script type="text/javascript">

	function comment(articleId,pid){
		layer.open({
			type : 2,
			area : [ '600px', '350px' ],
			content : [ `[[@{/comment}]]/${articleId}${pid?('/'+pid):''}`, 'no' ]
		});
	}
	function tpl(id, tagetId, data) {
		
		layui.use([ 'laytpl', 'jquery' ], function() {
			let laytpl = layui.laytpl, $ = layui.jquery;
			laytpl($(id).html()).render(data, function(html) {
				$(tagetId).html(html);
			});
		})
	}
	function loadComment() {
		layui.use([ 'jquery' ], function() {
			let laytpl = layui.laytpl, $ = layui.jquery;
			$.ajax({
				url : '[[@{|/comment/query/${article.id}|}]]',
				type : 'get',
				dataType : 'json',
				success : function(rs) {
					tpl("#commentTpl", ".comment-view", {
						comments : rs.list,
						tpl : tpl
					})
				}
			})
		})
	}

	layui.use([ 'form', 'layer', 'jquery' ], function() {
		let form = layui.form, layer = layui.layer, $ = layui.jquery;
		let ue = UE.getEditor('editor', {
			initialFrameHeight : 100,
			autoHeightEnabled : false,
			maximumWords : 200,
			toolbars : [ [ 'redo', //重做
			'bold', //加粗
			'italic', //斜体
			'underline', //下划线
			'strikethrough', //删除线
			'subscript', //下标
			'superscript', //上标
			'formatmatch', //格式刷
			'fontfamily', //字体
			'fontsize',//字号
			'forecolor', //字体颜色
			'backcolor', //背景色
			'spechars', //特殊字符
			'justifyleft', //居左对齐
			'justifyright', //居右对齐
			'justifycenter', //居中对齐
			'justifyjustify', //两端对齐  
			'paragraph', //段落格式
			'undo', //撤销
			'source', //源代码
			'blockquote', //引用
			'time', //时间
			'date', //日期
			'unlink', //取消链接
			'insertcode', //代码语言
			'link', //超链接
			'emotion' //表情
			] ]
		});
		let maxHeight = 200;
		//得到文章内容高度
		let contentHeight = $(".article .content").height();
		if (contentHeight > maxHeight) {
			$(".article .content").addClass('hiddenContent');
			$(".article .look").addClass('active');
		}
		$(".article .look").click(function() {
			$(".article .content").removeClass('hiddenContent');
			$(".article .look").removeClass('active');
		});
		//监听回复按钮
		$(".comment-btn").click(function() {
			comment("[[${article.id}]]")
		});
		loadComment();
	})
</script>
</head>
<body>
	<div class="layui-fluid">
		<div class="layui-row">
			<div class="layui-col-md12 layui-col-lg12">
				<ul class="layui-nav layui-anim layui-anim-fadein" lay-shrink="all">
					<li class="layui-nav-item"
						style="text-align: center; float: right;"><a href="@{/login}">登录</a></li>
					<li class="layui-nav-item"
						style="text-align: center; float: right;"><a
						href="javascript:;">注册</a></li>
					<li style="float: right; margin-top: 12px;"><i
						class="layui-icon layui-icon-username"
						style="font-size: 32px; top: 0px; bottom: 514px; margin-top: -86px;"></i></li>
					<li class="layui-nav-item"><a>产品</a></li>
					<li class="layui-nav-item"><a href="javascript:;">版块</a>
						<dl class="layui-nav-child">
							<dd>
								<a>版块1</a>
							</dd>
							<dd>
								<a>版块2</a>
							</dd>
						</dl></li>
				</ul>
			</div>
		</div>
		<div class="layui-row">
			<div class="layui-col-md12 layui-col-lg12">
				<div class="layui-row">
					<div class="layui-col-md12 layui-col-lg12 title"
						style="text-align: center;">
						<div class="title" data-th-text="${article.title}">文章标题</div>
						<div class="info">
							<span class="time"> 创建时间: <span
								data-th-text="${#dates.format(article.createdTime,'yyyy-MM-dd HH:mm:ss')}"></span>
							</span> <span class="author"> 作者:<span class="author"
								data-th-text="${article.author}"></span>
							</span>
						</div>
					</div>
				</div>
				<div class="layui-row">
					<div class="layui-col-md12 layui-col-lg12">
						<hr></hr>
					</div>
				</div>
				<div class="layui-row article">
					<div class="content layui-col-md12 layui-col-lg12"
						data-th-utext="${article.content}"></div>
					<div class="layui-row">
						<div
							class="look layui-col-md-offset5 layui-col-lg-offset5 layui-col-md2 layui-col-lg2">查看全文</div>
					</div>
				</div>
				<div class="layui-row">
					<a class="comment-btn layui-btn layui-btn-normal">回复</a>
				</div>
				<div class="layui-row ">
					<div class="layui-col-md12 layui-col-lg12 comment-view">
						<!-- 						<div class="layui-row comment"> -->
						<!-- 							<div class="layui-row "> -->
						<!-- 								<div class="layui-col-md12 layui-col-lg12 info"> -->
						<!-- 									<img class="head" data-th-src="@{/img/logo.jpg}" /> <span -->
						<!-- 										class="nickName">用户昵称</span> <span class="time">2019-10-01 -->
						<!-- 										12:00:00</span> -->
						<!-- 								</div> -->
						<!-- 							</div> -->
						<!-- 							<div class="layui-row content"> -->
						<!-- 								<div class="content layui-col-md12 layui-col-lg12">回复内容</div> -->
						<!-- 								<div class="comment"> -->
						<!-- 									<div class="layui-row"> -->
						<!-- 										<div class="layui-row "> -->
						<!-- 											<div class="layui-col-md12 layui-col-lg12 info"> -->
						<!-- 												<img class="head" data-th-src="@{/img/logo.jpg}" /> <span -->
						<!-- 													class="nickName">用户昵称</span> <span class="time">2019-10-01 -->
						<!-- 													12:00:00</span> -->
						<!-- 											</div> -->
						<!-- 										</div> -->
						<!-- 										<div class="layui-row content"> -->
						<!-- 											<div class=" layui-col-md12 layui-col-lg12">回复内容2</div> -->
						<!-- 											<div class="comment"> -->
						<!-- 												<div class="layui-row "> -->
						<!-- 													<div class="layui-row "> -->
						<!-- 														<div class="layui-col-md12 layui-col-lg12 info"> -->
						<!-- 															<img class="head" data-th-src="@{/img/logo.jpg}" /> <span -->
						<!-- 																class="nickName">用户昵称</span> <span class="time">2019-10-01 -->
						<!-- 																12:00:00</span> -->
						<!-- 														</div> -->
						<!-- 													</div> -->
						<!-- 													<div class="layui-row"> -->
						<!-- 														<div class="content layui-col-md12 layui-col-lg12">回复内容3</div> -->
						<!-- 													</div> -->
						<!-- 												</div> -->
						<!-- 											</div> -->
						<!-- 										</div> -->
						<!-- 									</div> -->
						<!-- 								</div> -->
						<!-- 							</div> -->
						<!-- 						</div> -->
					</div>
				</div>
			</div>
</body>
</html>